<template>
    <div class="bigbox">
        <div class="login_show_box">
            <div class="login_card">
                <!-- 图片及logo -->
                <div class="card_left">
                    <img class="logoimg" src="/favicon.ico" alt="">
                    <!-- <img src="/img/loginLeftBJ.png" alt=""> -->
                </div>
                <div class="card_right">
                    <h3 style="margin-bottom: 8px;font-size: 30px;">数据可视化流程控制平台</h3>
                    <h5 style="font-size: 15px;font-weight: 700;margin-top: 3px;letter-spacing: -.5px;color: #999;">
                        Data visualization workflow platform
                    </h5>
                    <el-input v-model="username" placeholder="用户名" :prefix-icon="User" />
                    <el-input v-model="password" type="password" placeholder="用户名" :prefix-icon="Lock" />
                    <el-button size="large" @click="onRequestLogin()" type="primary">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { User, Lock } from '@element-plus/icons-vue'
import { RequestLogin } from '@/api/user.js'
import { useRouter } from "vue-router";
const router = useRouter();
const username = ref('')
const password = ref('')
const keyDown = (e) => {
    // 回车则执行登录方法 enter键的ASCII是13
    if (e.keyCode == 13) {
        onRequestLogin()
    }
}
//调用接口登录
const onRequestLogin = async () => {
    let datalist = await RequestLogin(username.value, password.value)
    let { code, data, msg } = datalist
    if (code == 1) {
        // 存储token
        localStorage.setItem('TOKEN', datalist.token)
        localStorage.setItem('USER-DATA', JSON.stringify(data))
        router.push({ path: '/upluads' })
    } else {
        ElMessage({
            message: msg,
            type: 'warning',
        })
    }
}
onMounted(() => {
    window.addEventListener("keydown", keyDown);
})
// 卸载监听回车按键操作
onUnmounted(() => {
    window.removeEventListener("keydown", keyDown, false);
})

</script>

<style lang="scss" scoped>
.bigbox {
    width: 100vw;
    height: 100vh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background-color: #F6F7F8;

    .login_show_box {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .login_card {
            border-radius: 10px;
            box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
            ;
            max-width: 950px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
            background-color: #EAEEF6;

            .card_left {
                text-align: center;
                width: 450px;
                height: 50vh;

                // width: 100%;
                .logoimg {
                    position: absolute;
                    top: 20px;
                    left: 20px;
                    width: 80px;
                    // 移除白色背景
                    background-color: transparent;


                }
            }

            .card_right {
                flex: 1;
                min-width: 300px;
                padding: 50px 30px;
                background-color: #fff;
                height: 50vh;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .el-input {
                    height: 45px;
                    margin-bottom: 20px;
                }

                .el-button {
                    width: 100%;
                }
            }
        }
    }
}
</style>
